/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu { margin: 0;	padding: 0; }
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details {	display: block; }
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th {
	text-align: left;
	font-weight: normal;
}
html,body,fieldset,img,iframe,abbr {
	border: 0;
}
i,cite,em,var,address,dfn {
	font-style: normal;
}

[hidefocus],
summary {
	outline: 0;
}

li {
	list-style: none;
}

h1,h2,h3,h4,h5,h6,small {
	font-size: 100%;
}

sup,sub {
	font-size: 83%;
}

pre,code,kbd,samp {
	font-family: inherit;
}

q:before,
q:after {
	content: none;
}

textarea {
	overflow: auto;
	resize: none;
}

label,
summary {
	cursor: default;
}

a,
button {
	cursor: pointer;
}

h1,h2,h3,h4,h5,h6,em,strong,b {
	font-weight: normal;
}

del,ins,u,s,a,a:hover {
	text-decoration: none;
}

body,textarea,input,button,select,keygen,legend {
	font: 14px/1.14 arial, \5b8b\4f53;
	color: #333;
	outline: 0;
}

body {
	background: #fff;
}

a,
a:hover {
	color: #333;
}

.container {
	width: 100%;
	height: 100%;
	position: relative;
}

.pageDiv {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.page {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.page.hide {
	z-index: 2;
	-webkit-animation: scrollDown 2s linear;
	-moz-animation: scrollDown 2s linear;
	animation: scrollDown 2s linear;
}

.page.show {
	z-index: 1;
	-webkit-animation: scrollUp 2s linear;
	-moz-animation: scrollUp 2s linear;
	animation: scrollUp 2s linear;
}

.page.on {
	display: block;
}


/* .page.show {
	position: absolute;
	width: 100%;
	animation: scrollUp 4s linear infinite;
} */

@keyframes scrollUp {
	0% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(-100%);
	}
}
@keyframes scrollDown {
	0% {
		transform: translateY(0%);
	}

	50% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(200%);
	}
}

/*动画*/
@-webkit-keyframes clipPolygonShow {
	0% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%)
	}

	5% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 58%, 0 88%);
		clip-path: polygon(0 100%, 100% 100%, 100% 58%, 0 88%)
	}

	50% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 26%, 0 57%);
		clip-path: polygon(0 100%, 100% 100%, 100% 26%, 0 57%)
	}

	75% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 24%);
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 24%)
	}

	100% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0)
	}
}

@-moz-keyframes clipPolygonShow {
	0% {
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%)
	}

	25% {
		clip-path: polygon(0 100%, 100% 100%, 100% 58%, 0 88%)
	}

	50% {
		clip-path: polygon(0 100%, 100% 100%, 100% 26%, 0 57%)
	}

	75% {
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 24%)
	}

	100% {
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0)
	}
}

@keyframes clipPolygonShow {
	0% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%)
	}

	25% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 58%, 0 88%);
		clip-path: polygon(0 100%, 100% 100%, 100% 58%, 0 88%)
	}

	50% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 26%, 0 57%);
		clip-path: polygon(0 100%, 100% 100%, 100% 26%, 0 57%)
	}

	75% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 24%);
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 24%)
	}

	100% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0)
	}
}

@-webkit-keyframes clipPolygonHide {
	0% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0)
	}

	25% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 24%);
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 24%)
	}

	50% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 26%, 0 57%);
		clip-path: polygon(0 100%, 100% 100%, 100% 26%, 0 57%)
	}

	75% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 58%, 0 88%);
		clip-path: polygon(0 100%, 100% 100%, 100% 58%, 0 88%)
	}

	100% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%)
	}
}

@-moz-keyframes clipPolygonHide {
	0% {
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0)
	}

	25% {
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 24%)
	}

	50% {
		clip-path: polygon(0 100%, 100% 100%, 100% 26%, 0 57%)
	}

	75% {
		clip-path: polygon(0 100%, 100% 100%, 100% 58%, 0 88%)
	}

	100% {
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%)
	}
}

@keyframes clipPolygonHide {
	0% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0)
	}

	25% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 24%);
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 24%)
	}

	50% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 26%, 0 57%);
		clip-path: polygon(0 100%, 100% 100%, 100% 26%, 0 57%)
	}

	75% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 58%, 0 88%);
		clip-path: polygon(0 100%, 100% 100%, 100% 58%, 0 88%)
	}

	100% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%)
	}
}